<!--
 * @Author: guojinxin_hub 1907745233@qq.com
 * @Date: 2023-12-28 15:03:39
 * @LastEditors: guojinxin_hub 1907745233@qq.com
 * @LastEditTime: 2024-09-19 14:16:12
 * @FilePath: \yongqing-county\src\components\home\SpotTest.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="spotCheck">
      <div class="charts">
        <V3Echarts
          :height="150"
          :width="150"
          :options="Option1"
          container="characteristicPlantation"
        ></V3Echarts>
        <img src="/img/首页/catalogue.png" />
      </div>
      <div class="title-div">
        <ul class="title-ul">
          <li><span class="title">葡萄</span></li>
          <li>
            <span class="title-qualified">种植面积</span>
          </li>
          <li>
            <span class="title-unqualified">1,020</span>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent } from 'vue'
import { Option1 } from './charts'

export default defineComponent({
  name: 'CharacteristicPlantation',
  components: {},
  setup() {
    return { Option1 }
  },
})
</script>

<style scoped lang="scss">
.spotCheck {
  display: flex;
  align-items: center;
  .title-div {
    display: flex;
    align-items: center;
    .title-ul {
      padding-left: 28px;

      .title {
        font-size: 20px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        padding-left: 2px;
      }
      .title-qualified {
        font-size: 18px;
        font-weight: 400;
        color: rgba(169, 203, 223, 1);
        padding-left: 2px;
      }

      .title-unqualified {
        font-size: 22px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        vertical-align: middle;
        padding-left: 2px;
      }
      .val {
        font-size: 14px;
        font-weight: 400;
        color: #f5fdff;
      }
    }
    li {
      line-height: 30px;
    }
  }
  .charts {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
  }
  img {
    width: 150px;
    height: 150px;
    position: absolute;
  }
}
</style>
